<template>
  <div class="count">
    <div class="type_view">
      <span
        :class="'type' + (timeIndex == index ? ' active':'')"
        v-for="(item,index) in timeArr"
        :key="index"
        @click="changeTimeIndex(index)"
      >{{item.text}}</span>
    </div>
    <div class="main">
      <div class="top">
        <div class="left" @click="jumpTo('/searchStation')">
          <i class="iconfont icon-dizhi dizhi"></i>
          <span class="address">{{getSelect.title ? getSelect.title : '查看所有充电桩'}}</span>
          <i class="iconfont icon-xiangxia xiangxia"></i>
        </div>
        <div class="right">
          <yd-datetime v-model="currentdate" type="date" class="address" :callback="select_time"></yd-datetime>
          <i class="iconfont icon-xiangxia xiangxia"></i>
        </div>
      </div>
      <div class="bottom">
        <div class="left">
          <img :src="charging_icon" alt class="charging_icon">
          <div class="all">
            <div class="money">￥{{info.allprice}}</div>
            <div class="money_title">总充电费用</div>
          </div>
        </div>
        <div class="right">
          <div class="item">
            <div class="num">{{info.allpower}}w</div>
            <div class="title">
              <i class="iconfont icon-gongshuaishoufei icon"></i>
              <span>总功率</span>
            </div>
          </div>
          <div class="item">
            <div class="num">{{info.alltime}}h</div>
            <div class="title">
              <i class="iconfont icon-xiaoshijifei icon"></i>
              <span>总时长</span>
            </div>
          </div>
        </div>
      </div>
      <ve-histogram
        :data="chartData"
        :legend-visible="false"
        :tooltip-visible="false"
        :extend="chartExtend"
        :settings="chartSettings"
        :grid="grid"
        :yAxis="yAxis"
        :dataZoom="dataZoom"
        height="260px"
      ></ve-histogram>
    </div>
    <div class="record">
      <div class="read_record" @click="jumpTo('/Record')">查看充电记录</div>
    </div>
  </div>
</template>
   
<style lang="less" scoped>
@import "index.less";
</style>

<script>
import { mapGetters } from "vuex";
export default {
  name: "count",
  data() {
    this.grid = {
      show: true,
      bottom: 10,
      top: 20,
      left: 0,
      backgroundColor: "#fff",
      borderColor: "#fff"
    };
    return {
      timeArr: [
        {
          text: "日",
          status: 1
        },
        {
          text: "月",
          status: 2
        },
        {
          text: "年",
          status: 3
        }
      ],
      timeIndex: 0,
      charging_icon: require("../../../assets/images/charging.png"),
      currentdate: "",
      chartData: {
        columns: ["date", "price"],
        rows: []
      },
      chartExtend: {
        series: {
          type: "bar",
          barWidth: 16
        }
      },
      dataZoom: {
        type: "inside",
        show: true,
        start: 70,
        end: 100,
        // startValue: 10
      },
      // xAxis: [
      //   {
      //     gridIndex: 2
      //   }
      // ],
      yAxis: [
        {
          splitLine: {
            show: false
          },
          axisTick: {
            //y轴刻度线
            show: false
          }
        }
      ],
      chartSettings: {
        itemStyle: {
          barBorderRadius: 10,
          color: "#C1D1D4",
          emphasis: {
            color: "#4BE4CB"
          }
        },
        label: {
          show: true, //每条柱形显示数值
          position: "top",
          color: "#4BE4CB"
        }
      },
      info: {},
      deviceid: ""
    };
  },
  created() {
    var date = new Date();
    var seperator1 = "-";
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
      month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
      strDate = "0" + strDate;
    }
    this.currentdate = year + seperator1 + month + seperator1 + strDate;
    this.getdataList();
  },
  methods: {
    //选择时间
    select_time() {
      console.log("select_time");
      this.getdataList();
    },
    changeTimeIndex(index) {
      this.timeIndex = index;
      this.getdataList();
    },
    // 跳转
    jumpTo(path) {
      this.$router.push({
        path: path
      });
    },
    getdataList() {
      this.$dialog.loading.open("正在加载");
      this.$http
        .get("/order/Count", {
          params: {
            status: this.timeArr[this.timeIndex].status,
            deviceid: this.getSelect.id,
            time: this.currentdate
          }
        })
        .then(res => {
          this.info = res.data.data;
          this.chartData.rows = [];
          for (let i in this.info.count.date) {
            let obj = {
              date: this.info.count.date[i],
              price: this.info.count.price[i]
            };
            this.chartData.rows.push(obj);
          }
          this.$dialog.loading.close();
        });
    }
  },
  computed: {
    ...mapGetters("Select", ["getSelect"])
  },
  components: {}
};
</script>
